<template>
  <div>
    <el-card shadow="never">
      <h3>个人信息</h3>
    </el-card>
    <br>
    <el-card shadow="never">
      <el-form label-width="80px">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <span>{{ user.username }}</span>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" type="password" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="user.nickName" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="user.sex" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="user.age" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="user.phone" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="updateBtn">更新</el-button>
        </el-form-item>

      </el-form>
    </el-card>
    <br>
  </div>
</template>

<script>
import { getUser } from '@/utils/auth'
import { updateUser } from '@/api/user'
export default {
  name: 'PersonCenter',
  data() {
    return {
      user: {},
      imageUrl: ''
    }
  },
  created() {
    // 缓存拿去用户信息
    this.user = getUser()
    this.imageUrl = this.user.avatar
  },
  methods: {
    beforeAvatarUpload(file) {
      // 校验图片格式
      const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp'
      if (!isType) {
        this.$message.error('上传头像图片只能是 jpg / png / webp 格式!')
      }
      return isType
    },
    handleAvatarSuccess(res, file) {
      // 回显图片数据
      this.imageUrl = URL.createObjectURL(file.raw)
      this.user.avatar = res.data
    },
    updateBtn() {
      updateUser(this.user).then(resp => {
        this.$notifySuccess('更新成功')
        localStorage.setItem('userInfo', JSON.stringify(resp.data))
        this.$store.dispatch('user/login', resp.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
